<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <title>音乐日历</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_807168_16ggs30931c.css"/>
    <link rel="stylesheet" href="../css/music-calendar.css"/>

</head>
<body>
<header flex="main:center cross:center">
    <img src="../image/menu.png"/>
    <p flex-box="1" flex="main:center cross:center">January 2015</p>
    <img src="../image/add.png"/>
</header>


<section id="date">
    <div class="Week-days" flex>
        <div>Mo</div>
        <div>Tu</div>
        <div>We</div>
        <div>Th</div>
        <div>Fr</div>
        <div>Sa</div>
        <div>Su</div>
    </div>

    <div class="Days" flex="dir:top main:center cross:center">
        <div class="week week-1" flex>
            <div>26</div>
            <div>27</div>
            <div>28</div>
            <div>29</div>
            <div>30</div>
            <div>31</div>
            <div class="shi">1</div>
        </div>

        <div class="week week-2" flex>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>

        <div class="week week-3" flex>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            <div>15</div>
        </div>

        <div class="week week-4" flex>
            <div>16</div>
            <div>17</div>
            <div>18</div>
            <div>19</div>
            <div>20</div>
            <div>21</div>
            <div>22</div>
        </div>

        <div class="week week-5" flex>
            <div>23</div>
            <div>24</div>
            <div>25</div>
            <div>26</div>
            <div>27</div>
            <div>28</div>
            <div>29</div>
        </div>

        <div class="week week-6" flex>
            <div class="shi">30</div>
            <div class="shi">31</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</section>


<section id="mark">
    <div class="part" flex="main:center cross:center"><div></div></div>

    <div class="mark-list">
        <div flex="main:justify cross:center">
            <div class="texts" flex>
                <span class="text1">09:00</span>
                <div class="dian" flex="main:center cross:center">
                    <div class="none"></div>
                </div>
                <span class="text2">Do Stuff</span>
            </div>
            <i class="iconfont icon-Right"></i>
        </div>

        <div flex="main:justify cross:center">
            <div class="texts" flex>
                <span class="text1">10:30</span>
                <div class="dian" flex="main:center cross:center">
                    <div class="block"></div>
                </div>
                <span class="text2">Do even more Stuff</span>
            </div>
            <i class="iconfont icon-Right"></i>
        </div>

        <div flex="main:justify cross:center">
            <div class="texts" flex>
                <span class="text1">14:25</span>
                <div class="dian" flex="main:center cross:center">
                    <div class="none"></div>
                </div>
                <span class="text2">Do even more Stuff</span>
            </div>
            <i class="iconfont icon-Right"></i>
        </div>

        <div class="last" flex="main:left cross:center">
            <span>WEEK LOAD</span>
        </div>
    </div>
</section>


</body>
</html>